<!-- 评论 -->
<style scoped>
/* 顶部 */
.box {
    background-color: #f4f4f4;
    width: 100%;
    height: 500px;
}

.top {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    /* position: fixed;
  top: 0;
  right: 0; */
    /* text-align: center; */
    background-color: white;
}

.button {
    width: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    border: 1px solid;
    border-radius: 20px;
}

.backspacing {
    width: 20px;
    height: 20px;
}

.null {
    width: 70px;
}

/* 评分 */
.box {
    padding: 10px 10px;
    min-height: 97vh;
}

.score {
    width: 96%;
    margin-left: 2%;
    display: flex;
}

.textarea {
    width: 95%;
    height: 286px;
    margin-left: 2%;
    font-size: 13px;
    padding: 12px;
    border: none;
    margin-top: 3%;
}

.img {
    margin: 10% 10%;
}

.announce {
    width: 95%;
    height: 40px;
    color: white;
    background-color: #ffc300;
    border-radius: 15px;
    border: none;
    position: absolute;
    bottom: 10%;
    left: 2.5%;
}
</style>

<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="top">
      <button class="button">
        <img
          src="../assets/zuoz.png"
          alt=""
          class="backspacing"
          @click="BACK(item)"
        />
        <span>|</span>
        <img src="../assets/home2.png" alt="" class="backspacing" />
      </button>
      <div class="text">发布</div>
      <div class="null"></div>
    </div>

    <div class="box">
      <div class="score">
        <div>评分</div>
        <van-rate v-model="number" class="comment_van_van" />
      </div>

      <textarea
        class="textarea"
        rows="4"
        cols="50"
        placeholder="你可以从邂逅动物、游玩项目、交通等方面进行评价、晒图分享你在动物世界的探索旅程~"
        v-model="content"
      >
      </textarea>

      <div>再评价15字。可获得10经验</div>
      <div class="img">
        <van-uploader
          :after-read="afterRead"
          v-model="headImg"
          :max-count="1"
          class="picture"
        />
        <p>上传图片</p>
      </div>
      <div>
        <button @click="publish" class="announce">发表</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { NoticeBar } from "vant";
import { useRouter, useRoute } from "vue-router";
import { Scenic, Scenicom_add } from "../api/home";
import { File } from "../api/Register";
import { showSuccessToast } from "vant";
const router = useRouter();
const route = useRoute();
// 接受从首页传过来的字符串/并且把它转成对象使用
const item = route.query.scenicid;
console.log(item);
const Sid = ref('')
Scenic().then((res) => {
    console.log(res, "景区数据");
    for (let index = 0; index < res.data.length; index++) {
        if (item == res.data[index].id) {
            Sid.value = res.data[index]
        }
    }
    console.log(Sid.value);

});
let useinfo = JSON.parse(sessionStorage.getItem('useinfo'))
console.log(useinfo.id);
// 景区一行
const secID = JSON.parse(sessionStorage.getItem('secID'));
console.log(secID.id, '景区一行数据');
// 头像
// 图片上传
const fileList = ref();
const afterRead = (file) => {
    let img = file.file;
    const form = new FormData();
    form.append("file", img, img.name);
    console.log(file, 123456);
    File(form, { id: 23 })
        .then((arr) => {
            console.log(arr);
            fileList.value = arr.data.url;
            console.log(fileList.value);
        })
        .catch((err) => {
            console.log(err);
        });
};

// 添加
const headImg = ref([]);
const content = ref("");
const number = ref("");
function publish() {
    console.log(useinfo.id);
    console.log(number.value);
    console.log(content.value);
    Scenicom_add(
        {
            scenic_id: secID.id,
            user_id: useinfo.id,
            score: number.value,
            content: content.value,
            img: fileList.value,
        },
        { id: 23 }
    )
        .then((arr) => {
            showSuccessToast("评论成功");
            console.log(arr);
            // fileList.value = arr.data.url;
            // console.log(fileList.value);
        })
        .catch((err) => {
            console.log(err);
        });
}

// 返回上一页
function BACK(item) {
    console.log(item);
    router.push({
        name: "home"
    });
}
</script>